//引入样式
require("../../assets/css/reset.css")
require('../../assets/css/normalize.css')
require('./mine_modify.less');

// 引入模板
const dom = require("../../utils/dom.js")
const axios = require('../../utils/axios.js')

document.addEventListener("DOMContentLoaded", function () {
    // 1.点击后跳转页面到我的页面
    dom.get('#toMine').addEventListener("click", function () {
        history.back();
    })
    // 2.上传头像

    dom.get('#avatarBtn').addEventListener('change', function () {
        let fd = new FormData();
        fd.append('file', this.files[0]);

        axios.post('/api/shared/uploadPortrait', fd).then(res => {
            if (!res.data.errno) {
                dom.get('#avatar').src = axios.defaults.baseURL + res.data.data.url;
                dom.get('#avatar').dataset.value = res.data.data.url;
            } else {
                alert('上传失败');
            }
        })
    })

    //3.修改性别
    dom.get('#gender').addEventListener("click", function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            onConfirm: function (result) {
                dom.get('#gender').textContent = result[0].label
                dom.get("#gender").dataset = result[0].value
            },
            title: '性别'
        });
    })
    // 4.生日修改
    dom.get('#birthday').addEventListener("click", function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                let day = result.map(v => v.value).join('-');
                dom.get('#birthday').textContent = day;
            },
            title: '出生年月'
        });
    })
    // 5.省市二级联动
    let provinceId = 0;
    dom.get('#province').addEventListener("click", async function () {
        let pro = await axios.get('api/shared/province');
        let proArr = pro.data.data.map(v => {
            return { label: v.name, value: v.id }
        })
        weui.picker(proArr, {
            onConfirm: function (result) {
                dom.get('#province').textContent = result[0].label
                dom.get('#province').dataset.value = result[0].value;
                provinceId = result[0].value; //将选择的省份ID赋值出来
            },
            title: '所在省份'
        });
    })

    // 6.城市联动
    dom.get('#city').addEventListener("click", async function () {
        if (provinceId) {
            let city = await axios.get('/api/shared/city?provinceId=' + provinceId);
            let cityArr = city.data.data.map(v => {
                return { label: v.name, value: v.id }
            })
            weui.picker(cityArr, {
                onConfirm: function (result) {
                    dom.get('#city').textContent = result[0].label
                    dom.get('#city').dataset.value = result[0].value
                },
                title: '所在城市'
            });
        }
    })


    //7.个性签名
    dom.get('#sign').addEventListener('input', function () {
        dom.get('#signNum').textContent = this.value.length;
    })
    //8.上传数据
    dom.get('#saveBtn').addEventListener('click', function () {
        let nickName = dom.get('#nickname').value;
        let gender = Number(dom.get('#gender').dataset.value);
        let provinceId = Number(dom.get('#province').dataset.value);
        let cityId = Number(dom.get('#city').dataset.value);
        let birthday = dom.get('#birthday').textContent;
        let imgUrl = dom.get('#avatar').dataset.value;
        let sign = dom.get('#sign').value;
        //发请求
        axios.post('/api/user/changeInfo', {
            nickName,
            gender,
            provinceId,
            cityId,
            birthday,
            imgUrl,
            sign,
        }).then(res => {
            if (!res.data.errno) {
                //存储token
                localStorage.setItem('token', res.data.data.token);
                // history.back();
                alert('修改成功');
                console.log(res);
            } else {
                alert('修改失败');
            }
        })
    })
    //9.信息回填
    axios.get('/api/user/info').then(async (res) => {
        let data = res.data.data;
        //回填头像
        dom.get('#avatar').src = axios.defaults.baseURL + data.imgUrl;
        dom.get('#avatar').dataset.value = data.imgUrl;
        //昵称
        dom.get('#nickname').value = data.nickName;
        //性别
        let genderArr = ['男', '女', '保密'];
        dom.get('#gender').textContent = genderArr[data.gender];
        dom.get('#gender').dataset.value = data.gender || 0;
        //生日
        dom.get('#birthday').textContent = data.birthday;
        //省份
        let pro = await axios.get('api/shared/province');
        let [province] = pro.data.data.filter(v => v.id === data.provinceId);
        dom.get('#province').textContent = province.name;
        dom.get('#province').dataset.value = data.provinceId;
        //城市
        let city = await axios.get('/api/shared/city?provinceId=' + data.provinceId);
        let [curCity] = city.data.data.filter(v => v.id === data.cityId);
        dom.get('#city').textContent = curCity.name;
        dom.get('#city').dataset.value = data.cityId;
        //个性签名
        dom.get('#sign').value = data.sign;
        dom.get('#signNum').textContent = data.sign.length;
    });
})